<!--父级页面:控制除了登录页以外所有页面共有的头部与左侧菜单栏-->
<template>
  <!--display: flex;表示给父元素使用弹性布局
  效果:所有子元素横置,且父元素会根据子元素横置后的实际高度自动填充高度 -->
  <div style="display: flex;">
    <!--2.isCollapse为true:折叠左侧菜单栏,左侧菜单栏宽度为64px,右侧主体宽度为calc(100% - 64px)-->
    <div :style="{width:( isCollapse ? '64px': '178px')}" style="position: fixed;top: 0;bottom: 0;z-index: 1000;">
      <!--4.左侧菜单栏-->
      <el-menu
          background-color="#fff"
          style="width:100%;height:100vh;"
          text-color="blue"
          active-text-color="#ff0"
          :collapse="isCollapse"
          unique-opened router
          :collapse-transition="false"
      >
        <!--左侧菜单栏的顶部条 注意:顶部条也要写在el-menu里！-->

        <!--左侧菜单栏的导航项 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size:21px;"><OfficeBuilding /></el-icon><span>酒店</span>
            <!--            <el-icon style="font-size:21px;"><User/></el-icon><span>酒店</span>-->
          </template>
          <el-menu-item index="/hotelHome">酒店首页</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size:21px;"><Bicycle /></el-icon>
            <!--            <el-icon style="font-size:21px;"><Van/></el-icon>-->
            <span>出行方式</span>
          </template>
          <el-menu-item >飞机</el-menu-item>
          <el-menu-item >火车</el-menu-item>
          <el-menu-item >轮车</el-menu-item>
          <el-menu-item >汽车</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size:21px;"><Flag /></el-icon>
            <!--            <el-icon style="font-size:21px;"><Location/></el-icon>-->
            <span>旅游</span>
          </template>
          <el-menu-item index="/tours">旅游首页</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size:21px;"><Management /></el-icon>
            <!--            <el-icon style="font-size:21px;"><Place/></el-icon>-->
            <span>攻略.景点</span>
          </template>
          <el-menu-item index="/travelguide">攻略</el-menu-item>
          <el-menu-item  index="/attraction">景点</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size:21px;"><Tickets /></el-icon>
            <!--            <el-icon style="font-size:21px;"><MessageBox/></el-icon>-->
            <span>关于订单</span>
          </template>
          <el-menu-item index="/order">未支付</el-menu-item>
          <el-menu-item index="/paidorder">已支付</el-menu-item>
        </el-sub-menu>
      </el-menu>

    </div>
    <!--3.isCollapse为false:不折叠左侧菜单栏,左侧菜单栏宽度为208px,右侧主体宽度为calc(100% - 208px)-->
    <div :style="{width:( isCollapse ? 'calc(100% - 64px)': 'calc(100% - 208px)'),marginLeft: isCollapse ? '64px' : '178px'}">
      <div class="item-left" v-if="isCollapse" @click="isCollapseClick">
        <div><el-icon><ArrowRight /></el-icon></div>
      </div>
      <div class="item-left" v-else  @click="isCollapseClick">
        <div><el-icon><ArrowLeft /></el-icon></div>
      </div>
      <div class="common-layout">
        <el-container>
          <!--5.右侧:顶部菜单栏-->
          <el-header>
            <div class="heard-leftright">
              <div class="item-seacher">
                <img src="../../public/logo/logo.png" @click="router.push('/')" style="height:70px; margin-left:15px;margin-right:50px"/>
                <el-input
                    v-model="Searchvalue"
                    style="width: 240px"
                    size="large"
                    placeholder="请搜索"
                    :suffix-icon="Search"
                />
                <el-button  type="primary" @click="seacherFun"><el-icon><Search /></el-icon></el-button>
              </div>
              <div class="heard-right" v-if="user==null">
                <div class="denglu" @click="login">登录</div>
                <div @click="zhuce">注册</div>
              </div>
              <div class="heard-right" v-else>
                <el-dropdown trigger="click" >
                  <span style="font-size: 19px;font-weight: bold;">
                    <el-icon><UserFilled /></el-icon>
                    {{user.username}}
                    <el-icon><arrow-down /></el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="message(id)">个人信息</el-dropdown-item>
                      <el-dropdown-item @click="password">修改密码</el-dropdown-item>
                      <el-dropdown-item @click="passenger">旅客信息</el-dropdown-item>
                      <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </el-header>
          <!--主体图片-->
          <el-main>
            <router-view/>
          </el-main>
          <TravelAgentView/>
        </el-container>
      </div>
    </div>
  </div>
  <!--个人信息弹窗-->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose"
  >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"
                      :disabled="saveUserForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.userPhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.userEmail"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期">
            <el-date-picker type="date" format="YYYY-MM-DD" v-model="saveUserForm.userBirthday"
                            value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form-item label="地址">
            <el-input placeholder="请输入地址" v-model="saveUserForm.userAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.userGender">
              <el-radio border label="男" value="1" style="margin: 0"></el-radio>
              <el-radio border label="女" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>

  <!--修改密码弹窗-->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisiblePassword"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose"
  >
    <el-form label-width="80px" label-position="top">
      <el-form-item label="原密码">
        <el-input placeholder="请输入原密码" show-password v-model="changePassword.oldPassword"/>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input placeholder="请输入新密码" show-password v-model="changePassword.password"/>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input placeholder="请再次输入新密码" show-password v-model="changePassword.newPassword"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="savePassword">保存</el-button>
    </template>
  </el-dialog>

<!-- 旅客信息弹窗 -->
  <el-dialog title="旅客信息" v-model="passengerInfoDialogVisible" style="padding:40px;">
    <el-button type="primary" style="margin:10px 0;" @click="addPassenger">新增旅客</el-button>
    <el-table :data="passengerInfo">
      <el-table-column label="编号" prop="id" type="index" align="center" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号码" align="center"></el-table-column>
      <el-table-column prop="cardNum" label="身份证号码" align="center"></el-table-column>
      <el-table-column prop="gender" label="性别" align="center" :formatter="userGenderFormatter"></el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="200"
          align="center">
        <template #default="scope">
          <el-button link type="primary" style="font-size: 16px" @click="updatePassenger(scope.row.id)">编辑</el-button>
          <el-button link type="primary" style="font-size: 16px" @click="deletePassenger(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

<!-- 新增旅客弹窗 -->
  <el-dialog
      :title="passengerTitle"
      v-model="passengerVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClosePassengerVisible"
  >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input placeholder="请输入姓名" v-model="savePassengerForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码">
            <el-input placeholder="请输入手机号" v-model="savePassengerForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="savePassengerForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期">
            <el-date-picker type="date" format="YYYY-MM-DD" v-model="savePassengerForm.birthDate"
                            value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="身份证号码">
            <el-input placeholder="请输入身份证号码" v-model="savePassengerForm.cardNum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="国籍">
            <el-input placeholder="请输入国籍" v-model="savePassengerForm.nationality"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">
            <el-radio-group v-model="savePassengerForm.gender">
              <el-radio border label="男" value="1" style="margin: 0"></el-radio>
              <el-radio border label="女" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClosePassengerVisible">取消</el-button>
      <el-button type="primary" @click="savePassenger">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from "vue";
import TravelAgentView from "@/views/TravelAgentView.vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

// 旅客信息弹窗显示隐藏
const passengerInfoDialogVisible = ref(false);
// 定义一个对象用来保存旅客信息
const passengerInfo = ref([]);

// 定义方法获取旅客信息
const passenger = ()=>{
  passengerInfoDialogVisible.value=true;
  //查询当前用户绑定的旅客信息
  axios.get(BASE_URL+'/v1/passenger/select/'+getUser().id)
      .then((response)=>{
        if (response.data.code === 2000){
          passengerInfo.value = response.data.data;
          for (let i = 0; i < passengerInfo.value.length; i++) {
            let phone = passengerInfo.value[i].phone;
            let cardNum = passengerInfo.value[i].cardNum;
            // 隐藏手机号中间部分
            const maskPhone = (phone) => {
              if (phone.length !== 11) {
                return phone; // 如果不是11位手机号，直接返回
              }
              return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
            };
            // 隐藏身份证号码中间部分
            const maskCardNum = (cardNum) => {
              if (cardNum.length !== 18) {
                return cardNum; // 如果不是18位身份证号码，直接返回
              }
              return cardNum.replace(/(\d{4})\d{10}(\d{4})/, '$1**********$2');
            };
            passengerInfo.value[i].phone = maskPhone(phone);
            passengerInfo.value[i].cardNum = maskCardNum(cardNum);
          }
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}

const userGenderFormatter = (row,column,cellValue,index)=>{
  if(cellValue==1){
      cellValue='男';
    }else if(cellValue==0){
      cellValue='女';
    }
  return cellValue;
}

const addPassenger = ()=>{
  passengerTitle.value = '新增旅客';
  passengerVisible.value = true;
}

//新增旅客弹窗标题
const passengerTitle = ref();
//新增旅客弹窗显示隐藏
const passengerVisible = ref(false);
//定义一个对象用来保存新增旅客信息弹窗表单信息
const savePassengerForm = ref({
  id: '',
  name: '',
  phone: '',
  email: '',
  birthDate: '',
  cardNum: '',
  nationality: '',
  gender: '',
  userId: getUser().id
})
//定义一个方法用来保存旅客信息
const savePassenger = ()=>{
  let data = qs.stringify(savePassengerForm.value);
  axios.post(BASE_URL+'/v1/passenger/save',data)
      .then((response)=>{
        if (response.data.code===2000){
          if (response.data.data){
            if (response.data.data.phone){
              ElMessage.error(response.data.data.phone);
            }else if (response.data.data.email){
              ElMessage.error(response.data.data.email);
            }else if (response.data.data.cardNum){
              ElMessage.error(response.data.data.cardNum);
            }
        }else {
            ElMessage.success('保存成功!');
            //关闭弹窗
            passengerVisible.value = false;
            savePassengerForm.value = {userId: getUser().id};
            passenger();
          }
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
//定义关闭新增旅客弹窗的方法
const handleClosePassengerVisible = ()=>{
  if(confirm("确定关闭弹窗吗?")){
    //关闭弹窗且清空已输入的数据
    passengerVisible.value = false;
    savePassengerForm.value = {userId: getUser().id};
  }
}
//定义编辑旅客信息的方法
const updatePassenger = (id)=>{
  axios.get(BASE_URL+'/v1/passenger/selectById/'+id)
      .then((response)=>{
        if(response.data.code===2000){
          savePassengerForm.value = response.data.data[0];
          passengerTitle.value = '编辑旅客信息';
          passengerVisible.value = true;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
//定义删除旅客的方法
const deletePassenger = (id)=>{
  axios.post(BASE_URL+'/v1/passenger/delete/'+id)
      .then((response)=>{
        if(confirm("确定要删除该旅客吗?")){
          if(response.data.code===2000){
            ElMessage.success('删除成功!');
            passenger();
          }else {
            ElMessage.error(response.data.msg);
          }
        }
      })
}

//个人信息弹窗标题
const dialogTitle = ref('个人信息');
//个人信息弹窗显示隐藏
const dialogVisible = ref(false);
//定义一个对象用来保存弹窗表单信息
const saveUserForm = ref({
  id: '',
  username: '',
  userPhone: '',
  userEmail: '',
  userBirthday: '',
  userGender: '',
  userAddress:'',
});
//定义关闭弹窗的方法
const handleClose = () => {
  if(confirm("确定关闭弹窗吗?")){
    //关闭弹窗且清空已输入的数据
    dialogVisible.value = false;
    dialogVisiblePassword.value = false;
    saveUserForm.value = {};
    changePassword.value = {id: getUser().id};
  }
};
//定义方法保存个人信息
const saveUser = () => {
  let data = qs.stringify(saveUserForm.value);
  axios.post(BASE_URL+'/v1/user/save',data)
      .then((response)=>{
        if (response.data.code == 2000){
          ElMessage.success('保存成功!');
          //关闭弹窗
          dialogVisible.value = false;
          saveUserForm.value = {};
        }else {
          ElMessage.error(response.data.msg);
        }
      })
};
//定义方法查看当前用户个人信息
const message = (id)=>{
  dialogTitle.value = '个人信息';
  dialogVisible.value = true;
  id = getUser().id;
  axios.get(BASE_URL+'/v1/user/info?id='+id)
      .then((response)=>{
        if (response.data.code == 2000){
          saveUserForm.value = response.data.data[0];
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}

//定义一个对象用来保存修改密码表单信息
const changePassword = ref({
  id:'',
  oldPassword: '',
  password: '',
  newPassword: '',
})
//定义修改密码弹窗出现隐藏
const dialogVisiblePassword = ref(false);
//定义方法弹出修改密码弹窗
const password = ()=>{
  dialogTitle.value = '修改密码';
  dialogVisiblePassword.value = ref(true);
}
//定义方法修改密码
const savePassword = ()=>{
  changePassword.value.id = getUser().id;
  if(changePassword.value.oldPassword===changePassword.value.password){
    ElMessage.error('新密码不能和原密码一样!')
  }else{
    if(changePassword.value.password===changePassword.value.newPassword){
      let data = qs.stringify(changePassword.value);
      axios.post(BASE_URL+'/v1/user/save',data)
          .then((response)=>{
            if (response.data.code == 2000){
              ElMessage.success('修改成功!');
              //关闭弹窗
              dialogVisiblePassword.value = false;
              changePassword.value = {id:getUser().id};
            }else {
              ElMessage.error(response.data.msg);
            }
          })
    }else{
      ElMessage.error('两次新密码不一样，请重新输入')
    }
  }
}

//获取当前登录的用户对象
const user = ref(getUser());

//输入框值定义
const Searchvalue =ref('')
//定义变量控制菜单是否折叠
const isCollapse = ref(true);
//点击按钮控制折叠
function isCollapseClick(){
  isCollapse.value = !isCollapse.value
}


//点击登录
function login() {
  router.push('/login');
}
//点击注册
function zhuce(){
  router.push('/register')
}
//点击搜索
function seacherFun(){
  alert('点击搜索的方法')
}

//退出登录
const logout = ()=>{
  localStorage.removeItem('user');
  user.value = null;
  router.push('/');
}
</script>

<style scoped>

p {
  white-space: nowrap; /*强制文本不换行*/
  overflow: hidden; /*溢出隐藏*/
  text-overflow: ellipsis; /*超出去的文本替换成省略号*/
  margin-bottom: 10px;
}
:deep(.el-sub-menu__title){
  color: #617271;
}
:deep(.el-menu-item){
  color: #617271;
}
:deep(.el-button){
  height: 39px;
  width: 60px;
  font-size: 20px;
}
.item-left{
  width: 20px;
  height: 60px;
  /* background: red; */
  line-height: 60px;
  border-top: 1px solid #e6e4e4;
  border-bottom: 1px solid #e6e4e4;
  border-right: 1px solid #e6e4e4;
  border-radius: 0 12px 12px 0;
  position: fixed;
  top: 320px;
}
.item-seacher{
  display: flex;
  align-items: center;
}
.heard-leftright{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.heard-right{
  display: flex;
}
.denglu{
  margin-right: 60px;
}
.common-layout{
  padding:0 150px ;
}
</style>